<template>
  <div id="app">

    <template>
      <el-select v-model="status" placeholder="请选择">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
    </template>
    <el-row style="overflow: auto; text-align: center;" >
<!--      <el-button type="primary" @click="dialogFormVisible = true" style="margin-bottom: 10px;">添加规格</el-button>-->
      <el-table
          :data="tableData"
          style="margin-bottom: 20px;"
          :row-class-name="tableRowClassName">
        <el-table-column
            width="150px"
            prop="id"
            label="ID">
        </el-table-column>
        <el-table-column
            width="150px"
            prop="user_id"
            label="用户ID">
        </el-table-column>
        <el-table-column
            width="230px"
            prop="nickname"
            label="昵称">
        </el-table-column>
        <el-table-column
            width="150px"
            label="审核状态">
<!--            prop="status"-->
           <template slot-scope="scope" v-if="status === 0">
             <el-button v-if="" type="success" icon="el-icon-check" @click="usersStatus(scope.$index,1)" circle></el-button>
             <el-button type="danger" icon="el-icon-delete" @click="usersStatus(scope.$index,2)" circle></el-button>
           </template>
        </el-table-column>
      </el-table>
    </el-row>
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
          :total="1000">
      </el-pagination>
    </div>




  </div>
</template>

<script>
export default {
  data() {
    return {
      // Examine: {
      //   page: ,
      //   limit: 10,
      // },
      options: [{
        value: 0,
        label: '未审核'
      }, {
        value: 1,
        label: '已审核'
      }, {
        value: 2,
        label: '已拒绝'
      }, {
        value: 3,
        label: '申请中'
      }],
      value: '',


      page: 1,


      // 数据状态

      tableData: [],
      status: 1,

    }
  },
  created() {
    this.getExamine();
  },
  methods: {
    // 获取审核列表
    async getExamine(){
      await this.$http.post("/Admin/applyExamineList", {
        page: this.page,
        limit: 10,
        status: this.status,
      }).then(res =>{
        // console.log(res.data.data);
        this.tableData = res.data.data;
      }).catch(err =>{
        console.log("err getExamine =>", err)
      })
    },

    // 审核通过
    async usersStatus(index,n) {
      await this.$http.post("/Admin/operateApplyExamine",{
        id:this.tableData[index].id,
        status: n,
      }).then(res =>{
        console.log(res)
        this.getExamine();
      }).catch(err =>{
        console.log("err",err)
      })

      // console.log("id: " + this.tableData[index].id + "n = " + n)
    },




    //自定义列模板
    tableRowClassName(row, index) {
      if (index === 1) {
        return 'info-row';
      } else if (index === 3) {
        return 'positive-row';
      }
      return '';
    },


    // 操作当前页面
    handleCurrentChange(val) {
      // console.log(val)
      this.page = val;
    },

  },
  watch: {
    status: function() {
      this.getExamine();
    },
    page: function() {
      this.getExamine();
    },
  }
}
</script>

<style lang="less" scoped>
.el-row {
  width: 100%;
}

</style>
